<template>
  <div class="search-view">
    <form action="/">
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="tar-bar">
      <div class="tar-bar-list" v-for="item in tarBarData" :key="item.title">
        {{ item.title }}
      </div>
    </div>
    <div class="cotent-wrap">
      <div class="content">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadData"
        >
          <div class="content-list" v-for="(item, index) in loadedData">
            <van-card
              :price="item.body.price"
              :thumb="item.body.image"
            >
              <template #title>
                <div class="goods-name" v-html="item.body.name"></div>
              </template>
              <template #desc>
                <div class="goods-desc" v-html="item.body.desc"></div>
              </template>
            </van-card>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearch } from "@/api/home";
import {heightLight} from '@/utils/highLightWord'
export default {
  name: "SearchView",
  data() {
    return {
      //搜索关键词
      searchValue: "",
      //排序筛选
      tarBarData: [
        {
          title: "综合",
        },
        {
          title: "销量",
        },
        {
          title: "价格",
        },
        {
          title: "新品优先",
        },
        {
          title: "筛选",
        },
      ],
      //搜索数据
      searchData: null,
      //显示加载提示
      loading: false,

      //是否加载数据完成
      finished: false,

      //总数据量
      myData: [],

      //加载数据量
      count: 10,

      //数据偏移量
      offset: 0,

      //已加载的数据量
      loadedData: [],

      //函数防抖定时器序号
      timer: null,
    };
  },
  activated() {
    this.searchValue = this.$route.query.keywords;
    if (this.searchValue == "小米手机") {
      this.getSearchData(1);
    } else {
      this.getSearchData(2);
    }
  },
  methods: {
    //搜索
    onSearch() {
      this.loadedData=[]
      this.myData=[]
      this.$router.replace({name:'SearchView',query:{keywords:this.searchValue},})
      this.$router.go(0)
    },
    onCancel() {
      this.$router.push({name:'HomeView'})
    },
    //搜索数据
    getSearchData(dataParams) {
      getSearch({ axios: this.axios }, dataParams).then((res) => {
        // console.log(res.data.data);
        res.data.data.list_v2.forEach(item => {
          let res = null
          if (dataParams==1) {
            res = heightLight(item.body.name,'Xiaomi')
          }else {
            res = heightLight(item.body.name,'小米')
          }
          
          item.body.name = res;
        })
        this.searchData = res.data.data.list_v2;
        //创建初始化数据
        this.myData = this.searchData;
        this.loadData();
      });
    },
    initLoad() {
      let data = this.myData.slice(this.offset, this.offset + this.count);

      this.loadedData.push(...data);

      this.offset += this.count;

      this.loading = false;

      setTimeout(() => {
        if (data.length < this.count) {
          this.finished = true;
        } else {
          this.laoding = true;
        }
      }, 600);
    },
    //每次触底加载数据方法
    loadData() {
      //函数防抖控制触发频率
      if (this.timer) {
        clearTimeout(this.timer);
      }

      this.timer = setTimeout(() => {
        this.timer = null;

        this.initLoad();
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-view {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  ::v-deep .van-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 15;
  }
  .tar-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    position: fixed;
    top: 51px;
    left: 0;
    width: 100%;
    z-index: 15;
    background-color: #fff;
    .tar-bar-list {
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
  }
  .category-bar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .category-list {
      background-color: #f5f5f5;
      padding: 5px 6px;
      border-radius: 5px;
      height: 18px;
      line-height: 18px;
      text-align: center;
    }
  }
  .cotent-wrap {
    padding: 0 10px;
    margin-top: 90px;
  }
  .content {
    background-color: #f5f5f5;
    width: 100%;
    padding: 1px 10px 10px;
    box-sizing: border-box;
    .content-list {
      margin-top: 10px;
      text-align: left;
    }
    ::v-deep .van-card {
      background-color: #fff;
      .van-card__title {
        font-weight: 600;
        font-size: 15px;
      }
      .van-card__price {
        font-weight: 600;
        .van-card__price-integer {
          font-size: 16px;
        }
      }
    }
    .goods-desc {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #888;
      margin-top: 10px;
    }
  }
}
</style>